<template>
	<view>
		<!-- <view class="tabs-content">
			<view class="" v-for="(item,index) in eventProitlist" @click="tabClick(index)">
				{{item.title}}
			</view>
			<button type="primary" plain="true" @click="addevent" size="mini">添加要素</button>
		</view> -->
		<el-row :gutter="10">
			<el-col :span="6">
				<view class="left-menu">
					<uni-list>
						<uni-list-item showArrow clickable v-for="(item,index) in eventProitlist" @click="tabClick(index)">
							<template v-slot:body>
								<view class="slot-box">
									<view class="tag">
										<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
											mode=""></image>
									</view>
									<view class="list-item-img">
										<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
											mode=""></image>
									</view>
									<view class="list-item-title">
										{{item.title}}
									</view>
								</view>
							</template>
						</uni-list-item>
						<button type="primary" plain="true" @click="addevent" size="mini">+新增要素</button>
						<view class="sub-button-list align-center">
							<!-- 	<view class="list-item list-item1 flex align-center" @tap="previewForm">
								<view class="sub-button yulan">预览效果</view>
							</view> -->
							<view class="list-item list-item2 flex align-center">
								<view class="sub-button fabu" @tap="submit">立即发布</view>
							</view>
						</view>
					</uni-list>
				</view>
			</el-col>
			<el-col :span="18">
				<swiper :autoplay="false" :current='currentIndex' @change='tabClickswipe'
					style="width: 100%;height: 1200rpx;">
					<block v-for="(item, index) in eventProitlist">
						<swiper-item>
							<scroll-view scroll-y="true" style="height: 1200rpx;">
								<template>
									<view class="content">
										<view class="title" v-for="item in item.contentList">
											<input type="text" v-model="item.content" class="in-title"
												placeholder="请输入要素名称(必填)">
										</view>
									</view>

									<view class="need-form">
										<view class="form-title">设置填写项</view>
										<view class="diy-form">
											<show-form ref="show_form" :addCheckTop="160" :itemList="item.formData"
												@change="selFormDataChange"></show-form>
										</view>
										<view class="add-tip">
											<view class="add-item">
												<diy-form ref="sel_form" @selectType="selFormData"></diy-form>
											</view>
										</view>
									</view>
								</template>
							</scroll-view>
						</swiper-item>
					</block>
				</swiper>

			</el-col>
		</el-row>

		<view class="zhanwei"></view>
		<!-- <view>
			<sel-form ref="sel_form" @selectType="selFormData"></sel-form>
		</view> -->

		<mx-date-picker :show="mxDatePicker.showPicker" :showSeconds="false" :type="mxDatePicker.type"
			:value="mxDatePicker.value" :show-tips="true" :show-seconds="true" @confirm="DatePickerEnd"
			@cancel="DatePickerEnd" />
		<share-wechat ref="share_wechat" :addCheckTop="450"></share-wechat>
		<wechat-login ref="wechat_login" @callback="wechatRegister"></wechat-login>
	</view>
</template>

<script src="./add.js"></script>

<style lang="scss">
	.sub-button-list {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-around;

		.list-item {
			height: 100rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.list-item1 {
			width: 40%;
		}

		.list-item2 {
			width: 60%;
		}

		.sub-button {
			letter-spacing: 2rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
		}

		.yulan {
			width: 80%;
			border: 2rpx solid $uni-btn-color;
			background: #ffffff;
			height: 80rpx;
			margin: 0 10%;
			color: $uni-btn-color;
		}

		.fabu {
			width: 97%;
			background: $uni-btn-color;
			margin-right: 3%;
			color: #FFFFFF;
		}
	}

	.text-red {
		font-size: 26rpx;
	}

	.need-form {
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.time-chongfu {
			padding: 0 20rpx;
			height: 80rpx;

			.time-title {
				width: 90%;

			}

			.circle-name {
				width: 77%;
				text-align: right;
				height: 100%;
				overflow: hidden;
				color: #666666;
				line-height: 81rpx;
				font-size: 26rpx;
			}

			.iconfont {
				font-size: 26rpx;
			}
		}

		.time {
			padding: 0 20rpx;
			width: 100%;

			.time-title {
				height: 50rpx;
			}

			.sel-time-p {
				height: 80rpx;

				.sel-time {
					height: 60rpx;
					width: 650rpx;
					background: #F4F3F4;
					color: #445978;
					padding: 0 10rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 60rpx;
				}

				.and {
					height: 60rpx;
					width: 180rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}

		}

		.form-title {
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 80rpx;
			padding-left: 20rpx;

			.yulan {
				float: right;
				margin-right: 40rpx;
				font-size: 24rpx;
				background: #728DB5;
				height: 50rpx;
				line-height: 50rpx;
				width: 180rpx;
				color: #ffffff;
				font-weight: normal;
				text-align: center;
				border-radius: 15rpx;
				margin-top: 20rpx;
			}
		}

		.add-tip {
			height: 300rpx;
			font-size: 26rpx;

			.add-title {
				text-align: center;

				color: #6CA1D0;
			}

			.add-item {
				margin-top: 40rpx;
			}
		}
	}

	.content {
		background: #ffffff;
		padding: 10rpx;
		margin: 0 20rpx;
		border-radius: 20rpx;

		.title {
			height: 80rpx;
			border-bottom: 2rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				width: 130rpx;
			}

			.in-title {
				width: 80%;
				height: 100%;
				line-height: 80rpx;
				padding-left: 10rpx;
				font-size: 34rpx;
			}
		}
	}

	.add-event {
		padding: 0 20rpx;
		width: 50%;
		margin: 0 auto;

		button {
			width: 100%;
		}
	}

	.userinfo {
		width: 100%;
		height: 120rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 440rpx;
		background: #fff;
		padding: 0 10rpx;

		.top-user {
			height: 120rpx;

			.right2 {
				height: 100%;
				width: 220rpx;

				.no-share {
					margin-left: auto;
					margin-right: 20rpx;
				}

				.iconbg-detail {
					width: 170rpx;
					height: 50rpx;
					color: #ffffff;
					background: $uni-btn-color;
					border-radius: 50rpx;
					text-align: center;
					line-height: 50rpx;
					//float: right;
					margin: 0 0 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.yqcj {
						font-size: 24rpx;
					}
				}

				.mobile {
					font-size: 50rpx;
					color: $uni-btn-color;
				}
			}

			.right {
				height: 100%;
				width: 436rpx;

				.nickname {
					font-size: 30rpx;
					height: 120rpx;
					color: #777777;
					overflow: hidden;
					display: flex;
					align-items: center;
					padding: 10rpx 10rpx 0 0;
				}
			}

			.left {
				.headimg {
					overflow: hidden;
					display: block;
					margin: 0rpx;
					margin-right: 10rpx;
					border-radius: 20rpx;
					border: 2rpx solid #fff;
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}

	.left-menu {
		width: 100%;
		background: #fff;
		margin-left: 20rpx;

		.uni-list-item {
			height: 100rpx;

			.slot-box {
				width: 100%;
				display: flex;
				align-items: center;

				.tag {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 60rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list-item-img {
					width: 70rpx;
					height: 70rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list-item-title {
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
		}

		button {
			width: 100%;
			border: 1px solid #ededed;
			border-radius: 0;
			height: 100rpx;
			line-height: 100rpx;
			background: #f4f9ff;
			padding: 0 2rpx;
		}

		button:hover {
			border: 1px solid #ededed;
		}

	}
</style>